<template>
  <transition name="fade">
    <div ref="cjDialog" v-if="isShow" @click.self="closeDialog" class="dialog-modal" :style="styleCss">
      <slot></slot>
    </div>
  </transition>
</template>
<script>
export default {
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    option: {
      type: Object,
      default: () => {
        return {
          closeOnClickMasker: true,
          showMasker: true,
          zIndex: 9999,
          backgroundColor:'rgba(0, 0, 0, 0.5)',
        }
      }
    },
  },
  computed:{
    styleCss(){
      let zIndex = this.option.zIndex;
      let str = `z-index:${zIndex};`;
      let background = this.option.showMasker ? `background-color:${this.option.backgroundColor};` : '';
      str = `${str}${background}`;
      return str;
    }
  },
  watch: {
  },
  data() {
    return {
    };
  },
  mounted() {
  },
  methods: {
    closeDialog() {
      if (!this.option.closeOnClickMasker) {
        return;
      }
      this.$emit('update:isShow', false)
      this.$emit('closeDialog')
    },
  }
};
</script>
<style scoped>
.fade-enter-active {
  animation: show 0.5s forwards;
}
.fade-leave-active {
  animation: hide 0.5s forwards;
}
.dialog-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  opacity: 1;
}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hide {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>


